<template>
  <div>
    <div class="header-select">
      <el-select v-model="valueTime" class="m-2 select-year" placeholder="Select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="valueCompany" class="m-2 select-company" placeholder="Select">
        <el-option v-for="item in optionsCopy" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="project-content" ref="project-echartsd"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      valueTime: '2019',
      valueCompany: '集团',
      options: [
        {
          value: '2019',
          label: '2019',
        },
        {
          value: '2020',
          label: '2020',
        },
        {
          value: '2021',
          label: '2021',
        },
        {
          value: '2022',
          label: '2022',
        },
        {
          value: '2023',
          label: '2023',
        },
      ],
      optionsCopy: [
        {
          value: '集团',
          label: '集团',
        },
        {
          value: '上市公司',
          label: '上市公司',
        },
        {
          value: '民营企业',
          label: '民营企业',
        },
      ],
    };
  },
  mounted() {
    this.getCharts();
  },
  methods: {
    getCharts() {
      const el = this.$refs['project-echartsd'];
      const myChart = echarts.init(el);
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '未启动', max: 6500 },
            { name: '启动', max: 16000 },
            { name: '审前', max: 30000 },
            { name: '现场', max: 38000 },
            { name: '报警', max: 52000 },
            { name: '结果', max: 25000 },
            { name: '完成整改', max: 15000 },
          ],
          splitNumber: 7,
          axisName: {
            color: '#000',
          },
        },
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item',
            },
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: '#fff',
                borderColor: '#4584FF',
                borderWidth: 1,
              },
            },
            data: [
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000, 14000],
                areaStyle: {
                  color: 'rgba(69, 132, 255, 0.3)',
                },
                lineStyle: {
                  color: '#4584FF',
                },
                name: '审计项目',
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.header-select {
  text-align: right;
  margin-bottom: 7px;
}
:deep(.el-select) {
  width: 100px;
}
:deep(.el-input__wrapper) {
  height: 26px;
}
.select-year {
  margin-right: 10px;
}
.select-company {
  margin-right: 24px;
}
.project-content {
  width: 1172px;
  height: 260px;
}
</style>
